<template>
    <el-dialog :visible.sync="isShow" :title="headerTitle" @close="handleClose" center top="14vh" width="364px" append-to-body :fullscreen="fullscreen">
        <el-form :model="dialogForm" size="small" label-suffix=":" ref="detailForm" :rules="rules" label-width="80px">
            <!--              设备名称-->
            <el-form-item :label="$t('mtool.deviceName')" prop="deviceName">
                <div>

                    <!--12312-->
                    <el-tooltip v-if="type==3" class="item" effect="dark" :content="dialogForm.deviceName">
                        <div class="mtool-view">{{dialogForm.deviceName}}</div>
                    </el-tooltip>
                    <el-input v-else v-model="dialogForm.deviceName" :placeholder="$t('public.placeholder',{placeholder: $t('mtool.deviceName')})" size="small" />
                </div>
            </el-form-item>

            <!--              量具类型-->
            <el-form-item :label="$t('mtool.gaugeType')" prop="gaugeType">
                <el-select :disabled="type==3" style="width:100%" v-model="dialogForm.gaugeType" filterable size="small" reserve-keyword :placeholder="$t('public.select_holder',{select_holder: $t('mtool.gaugeType')})">
                    <el-option v-for="item in dict.type.NYIQC_GAUGE_TYPE" :key="item.label" :label="item.label" :value="item.label">
                    </el-option>
                </el-select>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button v-if="type==3" @click="$emit('update:visible',false)" icon="el-icon-close" size="small">{{$t('public.close')}}</el-button>
            <el-button v-else type="primary" @click="submitForm" :loading="loading" icon="el-icon-document" size="small">{{$t('public.save')}}</el-button>
        </div>
    </el-dialog>
</template>
<script>
import {addGaugeMessage, modGaugeMessage,} from '@/api/basic/gaugeMessage'

export default {
    name: 'mtool-detial',
    dicts: [
        'NYIQC_GAUGE_TYPE', //量具类型
    ],
    props: {
        value: {
            type: Object,
        },
        visible: {
            type: Boolean,
            default: false,
        },
        type: [String, Number], //1:新增  2：编辑 3：查看
    },
    watch: {
        visible(val) {
            const { value } = this
            if (val) {
                this.dialogForm = { ...value }
            }
        },
    },

    computed: {
        isShow: {
            get() {
                return this.visible
            },
            set() {},
        },
        headerTitle() {
            const { type } = this
            let title = ''
            if (type == 1) {
                title = this.$t('mtool.addHeader')
            }
            if (type == 2) {
                title = this.$t('mtool.editHeader')
            }
            if (type == 3) {
                title = this.$t('mtool.viewHeader')
            }
            return title
        },
    },
    data() {
        return {
            loading: false,
            fullscreen: false,
            deviceOptions: undefined,
            factoryOptions: undefined,
            dialogForm: {},
            //expireTime 到期日期
            expireTimeOptions: {
                disabledDate(time) {
                    return false
                },
            },
            // 表单校验
            rules: {
                measuringCode: [
                    {
                        required: true,
                        message: '计量编号没有可以填NA',
                        trigger: 'blur',
                    },
                ],
                standard: [
                    {
                        required: true,
                        message: '标准品不能为空',
                        trigger: 'blur',
                    },
                ],
                deviceName: [
                    {
                        required: true,
                        message: '设备名称不能为空',
                        trigger: 'blur',
                    },
                ],
                factoryName: [
                    {
                        required: true,
                        message: this.$t('formValidation.factoryAreaCannotBeEmpty'),
                        trigger: 'blur',
                    },
                ],
                // gaugeType: [
                //   { required: true, message: "量具类型不能为空", trigger: "blur" }
                // ],
                status: [
                    {
                        required: true,
                        message: '状态不能为空',
                        trigger: 'blur',
                    },
                ],
                masStatus: [
                    {
                        required: true,
                        message: 'MSA状态不能为空',
                        trigger: 'blur',
                    },
                ],
                respName: [
                    {
                        required: true,
                        message: '责任人不能为空',
                        trigger: 'blur',
                    },
                ],
                respDept: [
                    {
                        required: true,
                        message: '责任部门不能为空',
                        trigger: 'blur',
                    },
                ],
                employName: [
                    {
                        required: true,
                        message: '使用人不能为空',
                        trigger: 'blur',
                    },
                ],
                gaugeTime: [
                    {
                        required: true,
                        message: '计量日期不能为空',
                        trigger: 'blur',
                    },
                ],
                expireTime: [
                    {
                        required: true,
                        message: '到期日期不能为空',
                        trigger: 'blur',
                    },
                ],
            },
        }
    },
    methods: {
        /** 发起提交 */
        submitForm: function () {
            this.$refs.detailForm.validate((valid) => {
                let action = this.type == 1 ? addGaugeMessage : modGaugeMessage
                if (valid) {
                    this.loading = true
                    action(this.dialogForm).then((res) => {
                        this.loading = false
                        if (res.code == 200) {
                            this.$emit('refresh')
                            this.$emit('refresh')
                            this.$modal.msgSuccess('操作成功!')
                            this.$emit('update:visible', false)
                        } else {
                            this.$modal.msgError(res.msg)
                        }
                    })
                }
            })
        },

        handleClose(done) {
            this.dialogForm = {}
            this.resetForm('detailForm')
            this.$emit('update:visible', false)
        },

        handleGaugeMessageTime(e) {
            const self = this
            const { dialogForm } = self
            this.expireTimeOptions = {
                disabledDate(time) {
                    let res = false
                    if (dialogForm) {
                        const { gaugeTime, expireTime } = dialogForm
                        if (gaugeTime) {
                            res = time.getTime() < new Date(gaugeTime).getTime()
                        }
                    }
                    return res
                },
            }
        },
        handleExpireTime(e) {
            console.log(e)
            const today = new Date().getTime()
            const val = new Date(e).getTime()
            if (val > today) {
                this.dialogForm.remDay = ~~(
                    (val - today) /
                    1000 /
                    60 /
                    60 /
                    24
                ).toFixed(1)
            } else {
                this.dialogForm.remDay = 0
            }
            this.$forceUpdate()
        },
        handleRespName(e) {
            this.dialogForm.respName = e.name
        },
        handleEmployName(e) {
            this.dialogForm.employName = e.name
        },
        handleRespDept(e) {
            this.dialogForm.respDept = e.name
        },
        handleFile(e) {
            this.dialogForm.fileIds = e
        },
    },
}
</script>

<style scoped>
.mtool-view {
    background-color: #f5f7fa;
    border-color: #dfe4ed;
    border-width: 1px;
    border-style: solid;
    line-height: 28px;
    color: #c0c4cc;
    font-size: 13px;
    padding: 0 12px;
    border-radius: 3px;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
</style>
